<template>
 	<div class='project_square_container' @keydown.enter="selectSearch">
 		<div class='filterBar_container'>
			
 			<div class='select_container'>
				<a-input v-model:value="selectedData['search_AND_LIKE_assistantName']" :placeholder="t('teachersAI','请输入AI助手名称')"
				 style='width:300px;margin-right:20px'/>
					
 				<div class='selectBox'>
 					<a-select allowClear v-model:value="selectedData['search_AND_EQ_course']" :options="courseStructure" :field-names="{ label: 'name', value: 'id' }" style="width:300px;"
 						:placeholder="t('teachersAI','请选择课程')" show-search :filter-option="courseFilterOption">
 					</a-select>
 				</div>
				
				<a-input v-model:value="selectedData['search_AND_LIKE_teacher.name']" :placeholder="t('teachersAI','请输入教师姓名')"
					style="width: 250px; margin-right: 12px" />
				
 			</div>
			
			<div class='searchBtn'>
				<a-button type="primary" @click='selectSearch' style='margin-right:10px'>{{ t('control','查询') }}</a-button>
				<a-button @click='clear'>{{ t('control','重置') }}</a-button>
			</div>
			
 		</div>
 		<div class='content_container'>
 	
		<div class='projectListContainer'>
			<div class='projectList' v-if="projectList.length != 0">
				
				<div class='projectListItem' v-for="(item, i) in projectList" :key="item.id" @click="()=>projectItemClick(item)">
					<div class='aiImg'>
						<div v-if='item.coverAvatar==null' class='imgName'>{{item.teacherName=='王伟（女）'?'王伟':item.teacherName.slice(-2)}}</div>
						<img v-if='item.coverAvatar!=null' :src="item.coverAvatar" alt="">
					</div>
					<!-- <img :src="item.coverAvatar==null?aiImg:item.coverAvatar" alt=""> -->
					<div class='itemMessage'>
						<a-popover color='rgba(175, 165, 192,  0.3)'>
						    <template #content>
						      <div style='font-size: 12px;color:rgba(0,0,0,0.7)'>{{item.assistantName}}</div>
						    </template>
								<div class='aiName'>{{item.assistantName}}</div>
						</a-popover>
						<div class='aiMessage'>
							<div class='teacherName'>{{item.teacherName}}</div>
							<a-popover color='rgba(175, 165, 192,  0.3)' placement="bottom">
							    <template #content>
							      <div style='font-size: 12px;color:rgba(0,0,0,0.7)'>{{getCourseName(item.course)}}</div>
							    </template>
									<div class='courseName'>{{getCourseName(item.course)}}</div>
							</a-popover>
							
						</div>
					</div>
				</div>
				<div style="width:300px" v-for="item in (4 - projectList.length%4)"></div>

			</div>
			<div class='paginationBox' v-if="projectList.length != 0">
				<a-pagination v-model:current="pageData.current" v-model:pageSize="pageData.pageSize" 
				 show-size-changer :hideOnSinglePage='false' :total="pageData.total" @change="paginationChange"/>
			</div>
			<div class='projectList flexCenter' v-if='projectList.length == 0'>
				<a-empty>
					<template #description>
						<span style="color: #A3A6AD;">
							{{ t('teachersAI','暂无AI助手') }}
						</span>
					</template>
				</a-empty>
			</div>
		</div>
		</div>
 	</div>
 </template>
 
 <script setup>
 	import SquareProjectList from '@/components/SquareProjectList.vue';
 	import { ref, reactive, onMounted,watch } from 'vue';
 	import { Modal } from 'ant-design-vue';
 	import { useRouter } from 'vue-router';
 	import { getProjectList,checkGrade,getOptions } from '@/request/projectSquare.js';
 	import { teacherAiPage,getTeacherList } from '@/request/teacherAiList.js';
	import {year} from 'dayjs'; 
	import aiImg from '@/assets/projectImg1.jpg';
	import { t } from '@/i18n'
 
 	const router = useRouter();
	
 	onMounted(async () => {
 		await getProjectSquareList();
		await getOptionsList('course_category',courseStructure)
		let res=await getTeacherList()
		teacherStructure.value=res.data
			console.log('教师列表',teacherStructure.value)
 	});
	
	
	let courseStructure=reactive([]);
	let teacherStructure=reactive([]);
	
	//选择框模糊搜索
	const courseFilterOption = (input, option) => {
		return option.name.toLowerCase().indexOf(input.toLowerCase()) >= 0;
	};
	
 //获取选择框的options列表项
 async function getOptionsList(dictType,options){
	let res= await getOptions(dictType)
	console.log('课程',res)
	if(res&&res.code==200){
		res.data.forEach((item,i)=>{
			options.push({
				name:item.dictName,
				id:item.id
			})
		})
	}
 }
 
 //获取id对应的课程名
 function getCourseName(id){
	 let filterArr=courseStructure.filter(item=>id==item.id)
	 if(filterArr.length==0){
		 return t('common','暂无')
	 }else{
		 return filterArr[0].name
	 }
 }

	////////////////////////选择框
	const selectedData = reactive({
	
	});
	
	//筛选出选择框中变化的选值
	//不是初始值‘全部’和‘’
	function getSelectedChangedData(){
		let selectChangedData={};
		for(let key in selectedData){
			if(selectedData[key]!=''&&selectedData[key]!='全部'){
				selectChangedData[key]=selectedData[key]
			}
		}
		return selectChangedData
	}
	//点击查询按钮
	async function selectSearch(){
		console.log('查询’')
		let selectData=getSelectedChangedData()
		console.log('selectData',selectData)
		console.log('pageData',pageData)
		let data={
			page:0,
			size:pageData.pageSize,
			...selectData
		}
		await getProjectSquareList(data);
	}
	//点击重置按钮
	function clear() {
		for (let key in selectedData) {
			selectedData[key] = undefined; // 重置为默认值
		}
		getProjectSquareList();
	}
	///////////////////列表和分页
 const projectList = reactive([]);
	const pageData=reactive({
		total:0,
		current:0,
		pageSize:0
	})
//分页改变
 	async function paginationChange(page, size) {
 		console.log('分页变了', page, size);
		pageData.current=page;
		pageData.pageSize= size;
		let selectData=getSelectedChangedData()
		console.log('selectData',selectData)
		let data={
			page:page-1,
			size:size,
			...selectData
		}
		await getProjectSquareList(data);
 	}
 // 获取项目列表
 async function getProjectSquareList(data){
	 // const res = await getProjectList(data);
	 const res = await teacherAiPage(data);
	 console.log('res',res)
	 if (res&&res.code === 200) {
	 	const resData = res.data;
	 	// Object.assign(projectList, [...resData.content]);
	 	pageData.total=resData.page.totalElements;
	 	pageData.current=resData.page.number + 1;
	 	pageData.pageSize= resData.page.size;
		projectList.splice(0, projectList.length, ...resData.content);
		console.log('获取项目列表',projectList)
		// console.log(pageData,projectList)
	 }
 }
 //点击单个项目
 async function projectItemClick(item) {
	if(item.link){
		window.open(item.link,'_blank')
	}
 }
 
 

 </script>
 
 <style lang='scss' scoped>
	@import '@/styles/public.scss';
 	$filterBarContainerHeight: 10%;
 	$filterBarContainerMinHeight: 60px;
	$searchMarginRight:50px;
	$avatarWidth:50px;
	$avatarMarginRight:10px;
	$TeacherNameWidth:38px;
	$TeacherNameMarginRight:8px;
	$projectListItemPadding:10px;
 *{
	box-sizing: border-box;
 }
 	.project_square_container {
		height: 100%;
		width: $viewMinWidth;
		display: flex;
		flex-direction: column;
		min-height: 0;
 		.filterBar_container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 80px;
		padding: 18px;
		background: #FFFFFF;
 			.select_container {
 				display: flex;
 				align-items: center;
 				.selectBox {
 					display: flex;
 					align-items: center;
					margin-right:20px;
					& >div{
						margin-right:3px;
					}
 				}
				
 			}
			
			.searchBtn{
				display: flex;
				align-items: center;
				justify-content: space-between;
				
			}
			
 		}
 
 		.content_container {
			flex: 1;
    min-height: 0;
    width: 100%;
    margin-bottom: 30px;
    overflow: hidden;
    border-radius: 10px;
		/* background: white; */
		margin-top: 20px;
			.projectListContainer {
				border-radius: 10px;
				height: 100%;
				width: 100%;
				overflow-y: auto;
				overflow-x: unset;
				display: flex;
				flex-direction: column;
				@include hoverShowScrollBar();
				.projectList {
					width: 100%;
					// align-self: center;
					// height: 100%;
					padding-bottom: 0;
					display: flex;
			flex-wrap: wrap;
			align-items: flex-start;
			justify-content: space-between;
			width: 100%;
			padding: 0 0 20px 0;
			gap: 20px;
					
					.projectListItem{
						width: 301px;
height: 80px;
background: #FFFFFF;
box-shadow: 0px 2px 8px 0px rgba(126,148,197,0.09);
border-radius: 6px;
						transition: all ease-in 0.25s;
						display: flex;
						align-items: center;
						padding: 0 20px;
						border: 1px solid transparent;
						&:hover{
							box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.1);
							/* box-shadow: $generalBoxShadow; */
							cursor: pointer;

				background: #FFFFFF;
				box-shadow: 0px 3px 10px 0px #C1BFEF;
				border: 1px solid #8466F5;
						}
						
						.aiImg{
							display: block;
							width: 50px;
							height: 50px;
							border-radius: 50%;
							margin-right:10px;
							border: 1px solid rgb(0, 0, 0, 0.06);
							object-fit:cover;
							
							.imgName{
								width:100%;
								height:100%;
								display: flex;
								align-items: center;
								justify-content: center;
								background-color: rgba(175, 165, 192,  0.3);
								letter-spacing: 1px;
								border-radius: 50%;
							}
							
							img{
								width:100%;
								height:100%;
								border-radius: 50%;
							}
							/* box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.1); */
						}
						
						.itemMessage{
							width:calc(100% - #{$avatarWidth} - #{$avatarMarginRight});
							
							.aiName{
								width:100%;
								height: 20px;
								line-height: 20px;
								margin-bottom:8px;
								white-space: nowrap;
								overflow: hidden;   
								text-overflow: ellipsis;
font-weight: 500;
font-size: 16px;
color: rgba(0,0,0,0.85);
							}
							
							.aiMessage{
								width:100%;
								display: flex;
								align-items: center;
								font-size: 12px;
								color: #A599C5;
								.teacherName{
									width:$TeacherNameWidth;
									margin-right:$TeacherNameMarginRight;
								}
								
								.courseName{
									width:calc(100% - #{$TeacherNameWidth} - #{$TeacherNameMarginRight});
									white-space: nowrap;/* 不换行 */
									overflow: hidden;   /* 超出部分隐藏 */
									text-overflow: ellipsis;
								}
								
							}
							
						}
						
					}
					
				}
				
				.paginationBox {
					width: 100%;
					padding: 15px 0;
					margin-top: auto; 
					@include FlexCenterAndCenter();
				}
			
				.flexCenter {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 100%;
					padding-bottom: 100px;
				}
			}
 		}
 	}
 </style>